<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<cw:base />
		<script type="text/javascript">
		function hide(){  
			Ext.get('walk').parent().hide();
		}
		
		function show(){  
			Ext.get('walk').parent().show();
		}
		
		function onDisable() {
			Ext.getCmp('hobby3').childItems.each(function(item){
	            item.disable();
	        });
	    }
	    
	  function onEnable() {
			Ext.getCmp('hobby3').childItems.each(function(item){
	            item.enable();
	        });
	    }
		</script>
	</head>
	<body>
		<cw:form>
			<ul>
				<li>
					<b> 多选输入域，通过type=checkbox渲染成多选，通过checkboxGroup设置一组多选 </b>
				</li>
				<li>
					<b> 选择项的数据可以是本地数据也可以是远程加载数据，远程数据需要设置url </b>
				</li>
				<li>
					<b> 以下示例分别展现了多选框的数据加载及显示和隐藏等常用操作 </b>
				</li>
			</ul>
			<br />
			<br />
			<ul>
				<li>
					本地数据多选框，设置type为checkbox，包含checkbox子标签（子选项不需要设置type，默认为父标签的type）
					<table>
						<tr>
							<td align="right">
								爱好：
							</td>
							<td>
								<cw:checkboxGroup property="hobby" type="checkbox" enableTooltip="true" checkAll="true">
									<cw:checkbox text="游泳" inputValue="swim" onCheck="window.alert(this.inputValue)" tooltip="游泳"/>
									<cw:checkbox id="walk" text="散步" inputValue="walk" onCheck="window.alert(this.inputValue)" tooltip="散步"/>
								</cw:checkboxGroup>
							</td>
						</tr>
					</table>
					<br />
				</li>
				<li>
					本地数据多选框，设置type为checkbox，选项数据来源通过dataFields和data设置，dataFields为数据字段名称，data为数据值
					<table>
						<tr>
							<td align="right">
								爱好：
							</td>
							<td>
								<cw:checkboxGroup property="hobby" type="checkbox" valueField="code"
									dataFields="['code','text','checked','disabled']" data="[['swim','游泳',true],['walk','散步',false,true]]">
								</cw:checkboxGroup>
							</td>
						</tr>
					</table>
					<br />
				</li>
				<li>
					远程数据多选框，设置type为checkbox，设置url为远程加载URL
					<table>
						<tr>
							<td align="right">
								爱好：
							</td>
							<td>
								<cw:checkboxGroup id="hobby3" property="hobby" type="checkbox" valueField="code" url="checkbox.json">
								</cw:checkboxGroup>
							</td>
						</tr>
					</table>
					<br />
				</li>
				<li>
					设置onCheck可以触发选择后事件，默认选中和反选都会触发，若只要一种动作触发需要判断
					<table>
						<tr>
							<td align="right">
								爱好：
							</td>
							<td>
								<cw:checkboxGroup property="hobby" type="checkbox">
									<cw:checkbox text="游泳" inputValue="swim" onCheck="window.alert(this.inputValue)" />
									<cw:checkbox text="散步" inputValue="walk" onCheck="if(c==true){window.alert(this.inputValue);}" />
								</cw:checkboxGroup>
							</td>
						</tr>
					</table>
					<br />
				</li>
				<li>
					复选框控制，隐藏/显示第一组的散步选项
					<table>
						<tr>
							<td>
								<cw:button text="隐藏散步选项" onclick="hide()"></cw:button>
							</td>
							<td>
								<cw:button text="显示散步选项" onclick="show()"></cw:button>
							</td>
						</tr>
					</table>
					<br />
				</li>
				<li>
					复选框控制，禁用/启用第三组的所有选项
					<table>
						<tr>
							<td>
								<cw:button text="禁用" onclick="onDisable()"></cw:button>
							</td>
							<td>
								<cw:button text="启用" onclick="onEnable()"></cw:button>
							</td>
						</tr>
					</table>
					<br />
				</li>
			</ul>
		</cw:form>
	</body>
</html>
